<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 所有的scrip代码都要在这之下写，才能jQuery生效 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>渔网定位服务</title>
    <!--  腾讯地图样式  -->
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
    <!-- 引入样式 腾讯地图js -->
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=MA2BZ-UI6KM-NJD62-6YX4C-O22M6-HQBD6"></script>
    <script>
        // window.setInterval("initMap();",3000);
        function initMap() {
            //地图初始化函数，本例取名为init，开发者可根据实际情况定义
            var map = null
            var locations = [];
            var paths = [];
            var this_geometries = [];
            var this_geometries1 = [];
            var this_geometries2 = [];
            //定义地图中心点坐标
            var center = new TMap.LatLng(21.109384, 110.490444)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            map = new TMap.Map(document.getElementById('container'), {
                center: center,//设置地图中心点坐标
                zoom: 12,   //设置地图缩放级别
            });

            //查询所有点
            function selectAllPoint() {

                function ObjStory(styleId, paths) //声明对象
                {
                    this.styleId = styleId;
                    this.paths = paths;
                }

                function ObjStory1(styleId, position) //声明对象
                {
                    this.styleId = styleId;
                    this.position = position;
                }


                function ObjStory2(styleId, position, content) //声明对象
                {
                    this.styleId = styleId;
                    this.position = position;
                    this.content = content;
                }

                $.ajax({
                    type: "get",
                    url: "https://www.zhenfu.online/locate/list",
                    //异步关闭，默认true
                    async: false,
                    success: function (result) {
                        locations = result.data
                        console.log(locations)
                        for (j = 0; j < locations.length; j++) {
                            var position = locations[j]
                            //重置paths
                            paths = [];
                            paths.push(new TMap.LatLng(position.start_latitude, position.start_longitude), new TMap.LatLng(position.stop_latitude, position.stop_longitude))

                            for (i = 0; i < paths.length; i++) {
                                var objStory1 = new ObjStory1('myStyle', paths[i]);
                                var objStory2 = new ObjStory2('label', paths[i], position.create_time + "第" + position.index_net + "排");
                                this_geometries1.push(objStory1)
                                this_geometries2.push(objStory2)
                            }
                            //    添加折线
                            this_geometries.push(new ObjStory('style_blue', paths))
                        }
                        console.log("-----------------------")
                        console.log(this_geometries2)
                    }
                })


                // 初始化label，待修改
                var label = new TMap.MultiLabel({
                    id: 'label-layer',
                    map: map, //设置折线图层显示到哪个地图实例中
                    //文字标记样式
                    styles: {
                        'label': new TMap.LabelStyle({
                            'color': '#FF0000', //颜色属性
                            'size': 20, //文字大小属性
                            'offset': {x: 0, y: 0}, //文字偏移属性单位为像素
                            'angle': 0, //文字旋转属性
                            'alignment': 'center', //文字水平对齐属性
                            'verticalAlignment': 'middle' //文字垂直对齐属性
                        })
                    },
                    //文字标记数据
                    geometries: this_geometries2
                });

                // 创建并初始化MultiMarker
                var markerLayer = new TMap.MultiMarker({
                    map: map,  //指定地图容器
                    //样式定义
                    styles: {
                        //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
                        "myStyle": new TMap.MarkerStyle({
                            "width": 25,  // 点标记样式宽度（像素）
                            "height": 35, // 点标记样式高度（像素）
                            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                            "anchor": {x: 16, y: 32}
                        })
                    },
                    //点标记数据数组
                    geometries: this_geometries1
                });


                //创建 MultiPolyline
                var polylineLayer = new TMap.MultiPolyline({
                    id: 'polyline-layer', //图层唯一标识
                    map: map,//绘制到目标地图
                    //折线样式定义
                    styles: {
                        'style_blue': new TMap.PolylineStyle({
                            'color': '#3777FF', //线填充色
                            'width': 4, //折线宽度
                            // 'borderWidth': 5, //边线宽度
                            // 'borderColor': '#FFF', //边线颜色
                            'lineCap': 'butt' //线端头方式
                        }),
                    },
                    //折线数据定义
                    geometries: this_geometries

                });
            }

            selectAllPoint()
        }

    </script>
</head>
<body onload="initMap()">
<div id="container"></div>
</body>
</html>
